﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>


<script src="~/js/echarts.js"></script>



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>

    @* <div style="width:697px;height:550px;border:#ccc solid 1px;" id="dituContent"></div> *@
    <div id="echarts" style="width: 500px;height: 500px"></div>

</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rp5j6DYVV8tDQoOMrbQgAFxrAwnKvcWM"></script>

<script>
    var datas = [];
    var recordType = 0;
    $(function () {
        var myecharts = echarts.init(document.getElementById('echarts'));
        myecharts.showLoading({
            text: "正在努力的读取数据中。。。。。",
        })

        $.ajax({
            url: "http://localhost:5269/api/SheepECharts/SheepRecordBreedTypeQuery",
            data: JSON.stringify({ recordType: 1 }),
            type: "post",
            async: false,
            dataType: "json",
            contentType: "application/json",
            success: res => {
                console.log(res.data);
                datas = res.data;
            }

        })
        var option = {

            legend: {
                orient: 'vertical',
                left: 'left',
                data: []
            },
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: datas,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myecharts.hideLoading();    //隐藏加载动画
        myecharts.setOption(option);
    })




      

    
    console.log(datas);





























    // var options = [{name:"",value:0}]
    // var c = 0;
    // //反填
    // function FanT() {
    //     var recordType = 0;
    //     $.post({
    //         url: "http://localhost:5269/api/SheepECharts/SheepRecordBreedTypeQuery",
    //         data: JSON.stringify({ recordType: recordType }),
    //         async: false,
    //         dataType: "json",
    //         contentType: "application/json",
    //         success: function (res) {

    //             datas = res.data;
    //             console.log(1, res.data)



    //             options.forEach(x => {
    //                 // 使用map方法遍历res.data数组，避免使用for循环和var声明带来的问题
    //                 res.data.map((item, i) => {
    //                     // 明确判断每个元素是否包含所需属性，避免出现属性不存在的错误
    //                     if (item.hasOwnProperty('recordBreed') && item.hasOwnProperty('count')) {
    //                         x.name = item.recordBreed;
    //                         x.value = item.count;
    //                         c++
    //                     } else {
    //                         console.error(`Element at index ${i} in res.data is missing required properties.`);
    //                     }
    //                 });
    //             });


    //             if (options!=null) {

    //                 var option = {
    //                     series: [{
    //                         name: '访问来源',
    //                         type: 'pie',
    //                         radius: '55%',
    //                         center: ['50%', '60%'],
    //                         // data : [],
    //                         data: options,
    //                         // itemStyle: {
    //                         //     emphasis: {
    //                         //         shadowBlur: 10,
    //                         //         shadowOffsetX: 0,
    //                         //         shadowColor: 'rgba(0, 0, 0, 0.5)'
    //                         //     }
    //                         // }
    //                     }]
    //                 };

    //                 if(option!=null)
    //                 {


    //                     myecharts.hideLoading();    //隐藏加载动画
    //                     myecharts.setOption(option);

    //                 }
    //             }
    //         }

    //     })



    // if (option != null) {

    //     alert("1");
    //     myecharts.hideLoading();    //隐藏加载动画
    //     myecharts.setOption(option);

    // }

    //}








    // //创建和初始化地图函数：
    // function initMap() {
    //     createMap();//创建地图
    //     setMapEvent();//设置地图事件
    //     addMapControl();//向地图添加控件
    //     addMarker();//向地图中添加marker
    // }

    // //创建地图函数：
    // function createMap() {
    //     var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
    //     var point = new BMap.Point(116.403963, 39.915119);//定义一个中心点坐标
    //     map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
    //     window.map = map;//将map变量存储在全局
    // }

    // //地图事件设置函数：
    // function setMapEvent() {
    //     map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
    //     map.enableScrollWheelZoom();//启用地图滚轮放大缩小
    //     map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
    //     map.enableKeyboard();//启用键盘上下左右键移动地图
    // }

    // //地图控件添加函数：
    // function addMapControl() {
    //     //向地图中添加缩放控件
    //     var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
    //     map.addControl(ctrl_nav);
    //     //向地图中添加缩略图控件
    //     var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
    //     map.addControl(ctrl_ove);
    //     //向地图中添加比例尺控件
    //     var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
    //     map.addControl(ctrl_sca);
    // }

    // //标注点数组
    // var markerArr = [{ title: "我的标记", content: "我的备注", point: "116.403936|39.915147", isOpen: 0, icon: { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 } }
    // ];
    // //创建marker
    // function addMarker() {
    //     for (var i = 0; i < markerArr.length; i++) {
    //         var json = markerArr[i];
    //         var p0 = json.point.split("|")[0];
    //         var p1 = json.point.split("|")[1];
    //         var point = new BMap.Point(p0, p1);
    //         var iconImg = createIcon(json.icon);
    //         var marker = new BMap.Marker(point, { icon: iconImg });
    //         var iw = createInfoWindow(i);
    //         var label = new BMap.Label(json.title, { "offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20) });
    //         marker.setLabel(label);
    //         map.addOverlay(marker);
    //         label.setStyle({
    //             borderColor: "#808080",
    //             color: "#333",
    //             cursor: "pointer"
    //         });

    //         (function () {
    //             var index = i;
    //             var _iw = createInfoWindow(i);
    //             var _marker = marker;
    //             _marker.addEventListener("click", function () {
    //                 this.openInfoWindow(_iw);
    //             });
    //             _iw.addEventListener("open", function () {
    //                 _marker.getLabel().hide();
    //             })
    //             _iw.addEventListener("close", function () {
    //                 _marker.getLabel().show();
    //             })
    //             label.addEventListener("click", function () {
    //                 _marker.openInfoWindow(_iw);
    //             })
    //             if (!!json.isOpen) {
    //                 label.hide();
    //                 _marker.openInfoWindow(_iw);
    //             }
    //         })()
    //     }
    // }
    // //创建InfoWindow
    // function createInfoWindow(i) {
    //     var json = markerArr[i];
    //     var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
    //     return iw;
    // }
    // //创建一个Icon
    // function createIcon(json) {
    //     var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
    //     return icon;
    // }

    // initMap();//创建和初始化地图


</script>

